.domain-suggestion:not( .featured-domain-suggestion ) {
	display: flex;
	flex-direction: column;

	@include breakpoint-deprecated( '>660px' ) {
		padding: 15px 20px;
	}

	.is-section-signup & {
		@include breakpoint-deprecated( '>480px' ) {
			flex-direction: row;
			align-items: center;
		}
	}

	.is-section-domains & {
		@include breakpoint-deprecated( '>800px' ) {
			flex-direction: row;
			align-items: center;
		}
	}

	&.is-clickable {
		cursor: pointer;

		// NOTE: easeOutExpo easing function from http://easings.net/#easeOutExpo
		transition: box-shadow 0.25s cubic-bezier( 0.19, 1, 0.22, 1 );

		&:hover {
			box-shadow: 0 0 0 1px var( --color-neutral-light );
			z-index: z-index( 'root', '.domain-suggestion.is-clickable:hover' );
		}
	}

	&.is-added {
		background-color: var( --color-neutral-0 );

		.domain-suggestion__content {
			h3,
			.domain-product-price {
				color: var( --color-neutral );
			}
		}
	}

	&.is-unavailable {
		cursor: default;

		.domain-suggestion__content {
			h3,
			.domain-product-price {
				color: var( --color-neutral );
			}
		}
	}
}

.domain-suggestion__content {
	width: 100%;
	min-height: 32px;

	@include breakpoint-deprecated( '>660px' ) {
		display: flex;
		justify-content: space-between;

		&.domain-suggestion__content-domain-copy-test {
			justify-content: initial;
		}
	}

	.notice.is-compact {
		margin: 0 0 0 8px;
		color: var( --color-text-inverted );

		&.is-success {
			background: var( --color-success );
		}

		&.is-info {
			background: var( --color-primary );
		}

		&.is-warning {
			background: var( --color-warning );
		}

		.notice__content {
			padding: 4px 8px;
		}
	}

	.notice__icon-wrapper {
		display: none;
	}

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		background-color: var( --color-neutral-0 );
		color: transparent;
		min-height: 44px;
	}

	@include breakpoint-deprecated( '>660px' ) {
		.is-placeholder & {
			margin-right: 50%;
			min-height: 22px;
		}

		.is-placeholder:nth-of-type( 2n + 1 ) & {
			margin-right: 52%;
		}

		.is-placeholder:nth-of-type( 1 ) & {
			margin-right: 40%;
		}
	}

	> h3 {
		word-break: break-all;

		@include breakpoint-deprecated( '>660px' ) {
			flex-grow: 2;
		}
	}

	> div {
		.is-placeholder & {
			color: transparent;
		}
	}
}

.domain-registration-suggestion__title-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	&.domain-registration-suggestion__title-domain-copy-test {
		@include breakpoint-deprecated( '>480px' ) {
			max-width: 50%;
			min-width: 50%;
			margin-right: 1em;
		}

		@include breakpoint-deprecated( '>800px' ) {
			max-width: 55%;
			min-width: 55%;
			margin-right: 1em;
		}
	}

	.domain-registration-suggestion__title {
		width: auto;
		max-width: 100%;
		padding-right: 0.2em;
	}

	.badge {
		align-self: center;
	}

	.domain-registration-suggestion__hsts-tooltip {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	body.is-section-signup .layout:not( .dops ) & {
		.domain-registration-suggestion__hsts-tooltip {
			padding: 0;
		}
	}
}

.domain-registration-suggestion__title {
	font-size: $font-body;
	word-break: break-all;

	@include breakpoint-deprecated( '>480px' ) {
		align-self: center;
		padding-right: 2em;
	}
}

.button.domain-suggestion__action {
	min-width: 66px;
	text-align: center;
	margin-top: 16px;
	padding: 0.25em 3em;
	transition: all 0.1s linear;

	&.is-primary {
		@include breakpoint-deprecated( '>480px' ) {
			margin-left: 1em;
			margin-top: 0;
		}
	}

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		background-color: var( --color-neutral-0 );
		border: none;
		border-radius: 0;
		color: transparent;
		margin-left: 40px;
		min-height: 26px;
	}

	&.is-borderless {
		color: var( --color-primary );
		margin-top: 0;
		padding: 0;
	}

	.is-section-signup & {
		@include breakpoint-deprecated( '>480px' ) {
			flex: 1 0 auto;
			margin-left: 1em;
			margin-top: 0;
		}
	}

	.is-section-domains & {
		@include breakpoint-deprecated( '>800px' ) {
			flex: 1 0 auto;
			margin-left: 1em;
			margin-top: 0;
		}
	}
}

.domain-suggestion__chevron {
	display: none;
	margin-left: 10px;
	flex: 1 0 auto;
	color: var( --color-neutral-light );

	.is-placeholder & {
		animation: loading-fade 1.6s ease-in-out infinite;
		color: var( --color-neutral-0 );
	}

	.is-section-signup & {
		@include breakpoint-deprecated( '>480px' ) {
			display: block;
		}
	}

	.is-section-domains & {
		@include breakpoint-deprecated( '>800px' ) {
			display: block;
		}
	}
}
